<template>
  <a-layout class="layout-menu">
    <a-layout-sider
      class="layout-menu-sider"
      v-model="collapsed"
      :collapsedWidth="54"
      :trigger="null"
      collapsible
    >
      <logo :collapsed="collapsed" />
      <sider-menu :collapsed="collapsed" :menus="menuList" />
    </a-layout-sider>
    <a-layout
      class="layout-menu-right"
      :class="{
        'layout-menu-right--collapsed': collapsed,
        'layout-menu-right--fixed': Theme.fixedHeader,
        'layout-menu-right--boxshadow': !Theme.tabsView
      }"
    >
      <a-layout-header class="layout-menu-header">
        <user-header @collapsed="collapsed = !collapsed" />
      </a-layout-header>
      <a-layout-content class="layout-content">
        <a-affix v-if="Theme.tabsView" :offsetTop="Theme.fixedHeader ? 50 : 0">
          <tab-bar :menus="menuList" />
        </a-affix>
        <app-main />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Theme } from '@/config'
import Logo from './header/Logo.vue'
import UserHeader from './header/UserHeader.vue'
import SiderMenu from './menu/SiderMenu.vue'
import TabBar from './tabview/TabBar.vue'
import AppMain from './main/AppMain.vue'

export default {
  name: 'DefaultLayout',
  components: {
    Logo,
    UserHeader,
    SiderMenu,
    TabBar,
    AppMain
  },
  data() {
    return {
      Theme,
      collapsed: false
    }
  },
  computed: {
    ...mapState({
      menuList: (state) => state.menu.menuList,
      menuCollapsed: (state) => state.menu.menuCollapsed
    })
  },
  watch: {
    /**
     * 监测collapsed，记录菜单折叠状态
     * 更新到store
     */
    collapsed(val) {
      this.updateMenuCollapsed(val)
    }
  },
  methods: {
    ...mapActions({
      updateMenuCollapsed: 'menu/updateMenuCollapsed'
    }),

    /**
     * 监测窗口大小改变
     */
    updateCollapsed(width) {
      if (width > 1100) {
        this.collapsed = false
      } else {
        this.collapsed = true
      }
    }
  },
  mounted() {
    this.updateCollapsed(document.body.clientWidth)
    window.onresize = () => {
      const clientWidth = document.body.clientWidth
      return (() => {
        this.updateCollapsed(clientWidth)
      })()
    }
  }
}
</script>

<style lang="less">
// @dir style/variables
@menuWidth: @siderWidth;
@menuCollapWidth: @siderCollapWidth;
@navHeight: @siderNavHeight;

.layout-menu {
  // min-height: 100vh;

  &-header {
    height: @navHeight;
    line-height: @navHeight;
    padding: 0;
    z-index: 46;
    width: 100%;
  }

  // 左侧菜单区域
  &-sider {
    position: fixed;
    left: 0px;
    top: 0;
    height: 100vh;
    z-index: 69;

    .ant-layout-sider-children {
      overflow-x: auto;
    }

    .ant-menu-inline-collapsed {
      width: @menuCollapWidth;
    }
  }

  &-right {
    margin-left: @menuWidth;
    background: @colorBg !important;
    transition: all 0.2s;

    &--boxshadow {
      .layout-menu-header {
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      }
    }

    &--collapsed {
      margin-left: @menuCollapWidth;
      transition: all 0.2s;
    }

    &--fixed {
      .layout-menu-header {
        position: fixed;
        top: 0;
        left: 0;
        padding-left: @menuWidth;
        transition: all 0.2s;
      }

      .layout-content {
        position: relative;
        z-index: 1;
        padding-top: @navHeight;
      }

      &.layout-menu-right--collapsed {
        .layout-menu-header {
          padding-left: @menuCollapWidth;
        }
      }
    }
  }
}
</style>
